import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Modal, Steps, Row, Col, Space, Button } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './Welcome.less';
import Categories from '@/pages/admin/categories';
import G2LineBin from '@/pages/Charts/G2LineBin';
import G2LineXa from '@/pages/Charts/G2LineXa';

const { Step } = Steps;

export default (): React.ReactNode => {
  const intl = useIntl();
  const [current, setCurrent] = useState<number>(0);
  const [visible, setVisible] = useState<boolean>(false);
  const [visible2, setVisible2] = useState<boolean>(false);
  const onChange = (current: any) => {
    setCurrent(current);
  };
  const switchModal = (visible: boolean) => {
    setVisible(visible)
  }
  const switchModal2 = (visible: boolean) => {
    setVisible2(visible)
  }
  return (
    <PageContainer title={false}>
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Card extra={[
            <Space key='S1'>
              <Button type="default" onClick={() => switchModal2(true)}>系统引导</Button>
              <Button type="primary" onClick={() => switchModal(true)}>初始化菜单</Button>
            </Space>
          ]}>
            <G2LineXa />

          </Card>

        </Col>
        <Col span={12}>
          <Card>
            <Alert
              message={intl.formatMessage({
                id: 'pages.welcome.alertMessage',
                defaultMessage: 'Faster and stronger heavy-duty components have been released.',
              })}
              type="success"
              showIcon
              banner
            />
            <G2LineBin />

          </Card>
        </Col>
      </Row>
      <Modal
        title="菜单"
        visible={visible}
        onCancel={() => switchModal(false)}
        footer={null}
        destroyOnClose
      >
        <Categories layout='Menu' size="small" />
      </Modal>
      <Modal
        title="系统步骤"
        visible={visible2}
        onCancel={() => switchModal2(false)}
        footer={null}
        
      >
        <Steps current={current} onChange={onChange} className={styles.block} direction="vertical">
          <Step title="步骤 1" description="初始化菜单" />
          <Step
            title="步骤 2"
            description="系统设置，完成系统初始化，保证系统按照系统设置的参数运行"
          />
          <Step
            title="步骤 3"
            description="添加基础数据，例如物料档案、计量单位、仓库库位、供应商、客户、工序、部门员工等"
          />
          <Step title="步骤 4" description="建立一个产品，完善产品工艺设计结构" />
          <Step title="步骤 5" description="建立一个订单" />
          <Step title="步骤 6" description="发放您的订单，使其产生需求" />
          <Step title="步骤 7" description="根据需求创建采购订单" />
          <Step title="步骤 8" description="根据需求创建生产工单" />
          <Step title="步骤 9" description="完成入库" />
          <Step title="步骤 10" description="销售发货" />
        </Steps>
      </Modal>

    </PageContainer>
  );
};
